<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, minimal-ui">
    <title>MobioKit - Premium Mobile Template</title>
    <link rel="stylesheet" href="../../vendor/swiper/swiper.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <style>
        .index__box {
            display: flex;
            justify-content: space-between;
        }
        .yanqi__btn {
            background-color: #5160eb;
            display: inline-block;
            text-align: center;
            border-radius: 6px;
            padding: 2px 5px;
            height: fit-content;
            line-height: 20px;
            color: #fff;
            font-size: 12px;
        }
    </style>
</head>

<body>

    <!-- Overlay panel -->
    <div class="body-overlay"></div>
    <!-- Left panel -->
    <div id="panel-left"></div>
    <!-- Right panel -->
    <div id="panel-right"></div>


    <div class="page page--main" data-page="tables" id='app'>

        <header class="header header--page header--fixed">
            <div class="header__inner">
                <div class="header__icon">
                    <a href="../../../index.html"><img src="../../assets/images/icons/white/arrow-back.svg" alt="" title="" /></a>
                </div>
                <div class="header__logo header__logo--text"><a href="#">领用归还记录</a></div>
                <div class="header__icon header__icon--empty-space"></div>

            </div>
        </header>

        <!-- PAGE CONTENT -->
        <div class="page__content page__content--with-header">

            <h2 class="page__title">领用归还记录</h2>
            <!-- 
            <p class="welcome">
            </p> -->

            <div class="table table--4cols mb-20">
                <div class="table__inner">
                    <div class="table__row">
                        <div class="table__section table__section--header index">序号</div>
                        <!-- <div class="table__section table__section--header yanqi"></div> -->
                        <div class="table__section table__section--header device">设备名称</div>
                        <div class="table__section table__section--header returnTime">归还时间</div>
                        <div class="table__section table__section--header">当前状态</div>
                        <!-- <div class="table__section table__section--header">Option</div>
                        <div class="table__section table__section--header">Button</div> -->
                    </div>
                    <div class="table__row" v-for="(item,i) in dataList">
                        <div class="table__section  index">
                            {{i+1}}
                            <div
                                class="yanqi__btn"
                                v-if="item.ISEND != 1"
                                @click="yanqiFn(item)">延期</div>
                        </div>
                        <!-- <div class="table__section yanqi">
                            v-if="item.RETURNTIME && new Date().getTime() > (item.RETURNTIME - 24 * 60 * 60 * 1000) && item.ISEND != 1"
                            
                        </div> -->
                        <div class="table__section device">{{item.INSTRUMENTNAME}}</div>
                        <div class="table__section returnTime">{{item.RETURNTIME}}</div>
                        <div class="table__section">{{item.ISEND===1?'已归还':'未归还'}}</div>
                        <!-- <div class="table__section">{{item.INSTRUMENTNAME}}</div>
                        <div class="table__section">{{item.INSTRUMENTNAME}}</div> -->
                    </div>

                </div>
            </div>


        </div>

        <el-dialog
            title="延期申请"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            width="90%">
            <el-form :model="form" :rules="rules" label-width="80px" ref="ruleForm">
                <el-form-item label="延期日期" props="RETURNTIME">
                    <el-date-picker
                    type="datetime"
                    placeholder="延期日期"
                    v-model="form.RETURNTIME"
                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="延期理由" props="APPOINTMENTCAUSE">
                    <el-input v-model="form.APPOINTMENTCAUSE" type="textarea"></el-input>
                  </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateYanqi">提交申请</el-button>
            </span>
        </el-dialog>
    </div>
    <!-- PAGE END -->

    <!-- Social Icons Popup -->
    <div id="popup-social"></div>

    <!-- Alert -->
    <div id="popup-alert"></div>

    <!-- Notifications -->
    <div id="popup-notifications"></div>

    <script src="../../vendor/jquery/jquery-3.5.1.min.js"></script>
    <script src="../../vendor/jquery/jquery.validate.min.js"></script>
    <script src="../../vendor/swiper/swiper.min.js"></script>
    <script src="js/swiper-init.js"></script>
    <script src="js/jquery.custom.js"></script>
</body>



<script src="../../../js/vue/vue.js"></script>
<!-- <script src="js/iview/iview.min.js"></script> -->
<script src="../../../js/jsCookie/js.cookie.min.js"></script>
<script src="../../../js/axios/axios.min.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />





<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: {},
            dataList: [],
            dialogVisible: false,
            form: {
                RETURNTIME: '',
                APPOINTMENTCAUSE: '',
            },
            rules: {
                RETURNTIME: [
                    { required: true, message: '请选择延期时间' },
                ],
                APPOINTMENTCAUSE: [
                    { required: true, message: '请输入延期理由' },
                ],
            },
        },
        methods: {
            yanqiFn(row) {
                this.form = { ...row }
                this.dialogVisible = true
            },
            updateYanqi() {
                console.log(this.$refs)
                this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let formData = new FormData();
                    formData.append("id", this.form.ID);
                    // formData.append("startTime", dayjs(this.form.STARTTIME).format('YYYY-MM-DD HH:mm:ss'));
                    // formData.append("endTime", dayjs(this.form.ENDTIME).format('YYYY-MM-DD HH:mm:ss'));
                    formData.append("returnTime", dayjs(this.form.RETURNTIME).format('YYYY-MM-DD HH:mm:ss'));
                    formData.append("delayReason", this.form.APPOINTMENTCAUSE);
                    // formData.append("status", 5);
                    // formData.append("classification", this.Instrumentvalue + '|' + this.Instrumentnum);
                    axios
                    .post(
                        "http://10.11.41.128:30010/insrtumentReceive/delay?ticket=" + Cookies.get('ticket'),
                        formData, {
                            headers: {
                                "Content-Type": "multipart/form-data",
                                "token": this.user.token,
                            },
                        }
                    )
                    .then(res => {
                        if (res.data === null || res.data === " ") return;
                        if (res.data.status === 1) {
                            this.$notify({
                                type: 'success',
                                message: '延期成功'
                            });
                            this.dialogVisible = false
                            this.getDataTable()
                        } else {
                            this.$notify({
                                type: 'danger',
                                message: '加载失败' + res.data.msg
                            });
                            if (res.data.msg === "未登录") {
                                window.location.href = "../../../../login.html"
                            }
                        }
                    });
                }
                });
            },
            getCookieUser() {
                let userJson = Cookies.get('userInfo');
                if (!userJson) {
                    this.$notify({
                        type: 'danger',
                        message: '请先登录'
                    });
                    window.location.href = '../../../../login.html'
                    return
                }
                this.user = JSON.parse(userJson)
                if (!this.user) {
                    this.$notify({
                        type: 'danger',
                        message: '请先登录'
                    });
                    window.location.href = '../../../../login.html'
                    return
                }
                this.getDataTable()
            },
            getDataTable() {
                let formData = new FormData();
                formData.append("userId", this.user.id);
                axios
                    .post(
                        "http://10.11.41.128:30010/insrtumentReceive/findInstrumentReceiveByBorrow?ticket=" + Cookies.get('ticket'),
                        formData, {
                            headers: {
                                "Content-Type": "multipart/form-data",
                                "token": this.user.token,
                            },
                        }
                    )
                    .then(res => {
                        if (res.data === null || res.data === " ") return;
                        if (res.data.status === 1) {
                            console.log(res.data)
                            this.dataList = res.data.data.dataList.map(ite => ({ ...ite, RETURNTIME: ite.RETURNTIME ? dayjs(ite.RETURNTIME).format('YYYY-MM-DD HH:mm:ss') : '' }))

                        } else {
                            this.$notify({
                                type: 'danger',
                                message: '加载失败' + res.data.msg
                            });
                            if (res.data.msg === "未登录") {
                                window.location.href = "../../../../login.html"
                            }
                        }
                    });
            },



        },
        mounted: function() {
            this.getCookieUser()

        }
    })
</script>

</html>